<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <link rel="stylesheet" href="/admin/css/pintuer.css"/>
     <link rel="stylesheet" href="/admin/css/admin.css"/>
     <link  href="/admin/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
     <link href="/admin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
     <script src="/admin/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="/admin/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="/admin/js/pintuer.js"></script>
     <script type="text/javascript" charset="utf-8">
         function getXHR() {//返回XMLHttpRequest
             if(window.XMLHttpRequest) {//W3C标准的浏览器获取
                 return new XMLHttpRequest();
             } else {//ie浏览器适配
                 return new window.ActiveXObject("Microsoft.XMLHTTP");
             }
         }
         // document.write(getXHR());
     </script>
</head>
<body>
<form method="post" action="/admin/film/cast-member">
  <div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 编辑影片演职人员</strong></div>
      <div>
          <input type="hidden" name="filmId" th:value="${film!=null ? film.id:''}">
          <h3>为电影<span class="text-info" th:text="${film!=null ? film.name:''}"></span>编辑演职人员</h3>
      </div>

    <div class="padding border-bottom">
      <ul class="search">
        <li>
                <input type="text" name="makerName" class="form-control" placeholder="演员名称查找" required>
        </li>
          <li> <button class="btn btn-success">查询</button></li>
      </ul>

    </div>
    <table class="table table-hover text-center">
        <thead>
            <tr>
                <th>头像</th>
                <th>姓名</th>
                <th>性别</th>
                <th>个人简介</th>
                <th>身份</th>
                <th>编辑</th>
            </tr>
        </thead>
     <tbody>
        <tr th:if="${makerList!=null}" th:each="m:${makerList}" th:object="${m}">
            <td>
                <img th:src="|/file/image/*{pic1}|" height="80">
            </td>
            <td th:text="*{name}"></td>
            <td th:text="*{sex}"></td>
            <td>
                <p class="hide" th:text="*{briefIntro}"></p>
                <a class="btn btn-info" data-toggle="modal" data-target="#myModal" onclick="showBI(this);">
                    <span class="icon-info"></span>演员介绍</a>
            </td>
            <td>
                <select class="form-control" name="job">
                    <option th:each="o:${occuList}" th:text="${o.name}"></option>

                </select>
            </td>
            <td>
                <button th:value="*{id}" type="button" class="btn btn-info" onclick="addCastMember(this)"><span class="icon-adn"></span>添加</button>
            </td>
        </tr>
     </tbody>
      <tr>
        <td colspan="8">
		</td>
      </tr>
    </table>
  </div>
</form>

<script type="text/javascript">
    function addCastMember(element){
        let filmId=$("input[name=filmId]").val();
        let makerId=$(element).val();
        let job=$(element).parents("tr").find("select[name=job]").val();
        let params={"filmId":filmId,"makerId":makerId,"job":job};
        alert(JSON.stringify(params));
        $.post(
            '/admin/film/cast-member/add',
            params,
            function (data){
                if (data.isok==1){
                    alert("添加成功");
                }else{
                    alert(data.msg);
                }
            },
            "json"
        );
    }
    function showBI(element){
       let briefIntro = $(element).prev().text();
       $("#myModal .modal-body p").text(briefIntro);
    }
</script>
<!-- 用于显示影人介绍信息 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
                <h4 class="modal-title" id="myModalLabel">影人简介</h4>
            </div>
            <div class="modal-body">
                <p>
                    李若彤，中国香港女演员。主演过《神雕侠侣》、《天龙八部》、《杨门女将》、《秋香》、《武当》、《大宋惊世传奇》等多部影视作品，其中她在《神雕侠侣》里饰演的小龙女一角最广为人知。
                    李若彤在电视剧中饰演过各种类型的角色，如骁勇善战的巾帼英雄杨八妹，古灵精怪的个性小姐秋香，柔情似水的名门千金沈蓉，侠肝义胆的武林高手雪鹰，外秀内恶的后宫娘娘刘妃等。作品中她以各种造型出现，其中电视剧《武当》里沈蓉这一角色的前期造型被一些影迷视为她古装扮相的视觉巅峰。
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                <!--<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>-->
            </div>
        </div>
    </div>
</div>
</body>
</html>